<template>
  <div>
    <el-dialog
      :title="title"
      :visible.sync="dialogVisible"
      width="50%"
      @close="handleCloseDialog">
      <!-- 表单部分 -->
      <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="100px">
        <el-form-item label="设备地址" prop="address">
          <el-input v-model="ruleForm.address" placeholder="请选择设备地址"></el-input>
        </el-form-item>
        <el-form-item label="设备类型" prop="type">
          <treeselect
            v-model="ruleForm.type"
            :options="optionstree"
            placeholder="请选择设备类型" />
        </el-form-item>
        <el-form-item label="采集器" prop="collector">
          <el-select v-model="ruleForm.collector" placeholder="请选择采集器">
            <el-option
              v-for="item in options"
              :key="item.value"
              :label="item.label"
              :value="item.value">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="编码" prop="code">
          <el-select v-model="ruleForm.code" placeholder="请选择编码">
            <el-option
              v-for="item in options"
              :key="item.value"
              :label="item.label"
              :value="item.value">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="分隔符" prop="separator">
          <el-input v-model="ruleForm.separator" placeholder="请输入分隔符, 例如: ;"></el-input>
        </el-form-item>
        <el-form-item label="告警时间" prop="time">
          <!-- <el-col :span="14">
            <el-input v-model="ruleForm.time"></el-input>
          </el-col>
          <el-col :span="10" style="padding-left: 20px;">
            <el-select v-model="ruleForm.time" placeholder="请选择">
              <el-option
                v-for="item in options2"
                :key="item.value"
                :label="item.label"
                :value="item.value">
              </el-option>
            </el-select>
          </el-col> -->
          <el-input placeholder="请输入内容" v-model="ruleForm.time" class="input-with-select">
            <el-select v-model="ruleForm.select" slot="append" placeholder="请选择" style="width: 180px;">
              <el-option label="分钟" value="1"></el-option>
              <el-option label="小时" value="2"></el-option>
            </el-select>
          </el-input>
        </el-form-item>
      </el-form>
      <!-- 确定按钮 -->
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="dialogVisible = false">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import Treeselect from '@riophae/vue-treeselect'
import '@riophae/vue-treeselect/dist/vue-treeselect.css'
export default {
  data() {
    return {
      sortValueBy: 'ORDER_SELECTED',
      title: '新增',
      dialogVisible: false,
      ruleForm: {
        address: '',
        type: null,
        collector: '',
        code: '',
        separator: '',
        time: '',
        select: '1'
      },
      rules: {
        address: [{
          required: true,
          message: '请输入设备地址',
          trigger: 'blur'
        }],
        type: [{
          required: true,
          message: '请选择设备类型',
          trigger: 'blur'
        }],
        collector: [{
          required: true,
          message: '请选择采集器',
          trigger: 'blur'
        }],
        code: [{
          required: true,
          message: '请选择编码',
          trigger: 'blur'
        }],
        time: [{
          required: true,
          message: '请输入告警时间',
          trigger: 'blur'
        }]
      },
      options: [
        { value: '选项1', label: '黄金糕' },
        { value: '选项2', label: '双皮奶' }
      ],
      options2: [
        { value: '选项1', label: '分钟' },
        { value: '选项2', label: '小时' }
      ],
      optionstree: [{
        id: 'a',
        label: 'a',
        children: [{
          id: 'aa',
          label: 'aa'
        }, {
          id: 'ab',
          label: 'ab'
        }]
      }, {
        id: 'b',
        label: 'b'
      }, {
        id: 'c',
        label: 'c'
      }]
    }
  },
  components: {
    Treeselect
  },
  methods: {
    init(flag, data) {
      if (data !== '') {
        this.title = '修改'
      } else {
        this.title = '新增'
      }
      this.dialogVisible = flag
    },
    // 当弹框关闭时，清空表单
    handleCloseDialog() {
      this.$refs.ruleForm.resetFields()
    }
  }
}
</script>

<style scoped>
  .el-select {
    width: 100%;
  }
</style>
